<template>
	<view class="content display  displayColumn">
		<!-- 导航栏 -->
		<u-navbar title="摩卡商城" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<view class="left_arrow  display all_item" slot="left">
				<uni-icons type="left" color="#fff" size="15" style="line-height: 0;" @click="back"></uni-icons>
			</view>
			<view class="  display all_item" slot="center">
				<span class="font_comm mokashoping">摩卡商城</span>
			</view>
		</u-navbar>
		<!-- 图片 -->
		<view class="content_all display  displayColumn">
			<!-- 图片 -->
			<view class="fn_imgs display ">
				<img class="imgs" src="@/static/img/car-manage.png" alt="" />
			</view>
			<!-- 摩卡兄弟挪车码 -->
			<view class="fn_sancode M-T-24 display  all_item">
				<view class="fn_sancodeall display ">
					<view class="fn_item_all  display displayColumn M-L-24 P-TB-24">
						<view class="one display  ">
							<span class="font_comm moka_txt">摩卡兄弟挪车码</span>
						</view>
						<view class="two  display displaycenter_aliem">
							<view class="two_left display  displaycenter_aliem">
								<span class="font_comm1 fuhao_txt fontSize">￥</span>
								<span class="font_comm1 money_txt fontSize">19.9+199积分</span>
							</view>
							<view class="two_right display ">
								<span class="dele_txt font_comm fontSize">￥29.9</span>
							</view>
						</view>
						<view class="three  display ">
							<span class="yunfei_txt font_comm fontSize">运费：免运费</span>
							<span class="yunfei_txt font_comm fontSize">仅剩：45</span>
							<span class="yunfei_txt font_comm fontSize" style="margin-right: 24rpx;">销量：2.5万</span>
						</view>
					</view>
				</view>
			</view>

			<!-- 按钮邮寄领取和到店领取 -->
			<view class="button_two display  M-T-20 displaycenter_aliem">
				<view class="button_wto_left display ">
					<view @click="change(index)"
						:class="{left_one:selectIndex !=index,left_one1:selectIndex==index, display:true,  all_item:true}"
						v-for="(item,index) in arr" :key="index">
						<span class="font_comm fontSize lingqu_txt">{{item.name}}</span>
					</view>
				</view>
			</view>
			<!-- 选择门店 -->
			<view class="selectmendian display " style="margin-top: 20rpx;">
				<view class="selectmendian_all display displaycenter_aliem  L-R-ALL">
					<view class="selectmendian_all_left display displaycenter_aliem">
						<span class="font_comm fontSize select_txt M-L-24">选择门店</span>
					</view>
					<view class="selectmendian_all_right display  displaycenter_aliem M-R-24" @click="openPopup">
						<span class="font_comm fontSize huixian_txt ">选择门店后这里回显名称</span>
						<uni-icons type="right" size="15"></uni-icons>
					</view>
				</view>
			</view>

		</view>
		<!-- 弹窗 -->

		<u-popup :show="flag" mode="bottom" round="20" :safeAreaInsetBottom="false">
			<view class="display  popup_all displayColumn">
				<scroll-view class="display displayColumn" scroll-y="true" style="height: 800rpx;"
					@scrolltolower="scrolltolower" lower-threshold="50">
					<view class="title_delete display displaycenter_aliem ">
						<span class="fontSize font_comm lingqu_txt">选择领取门店</span>
						<uni-icons class="delete_icon" type="closeempty" size="24" @click="clises"></uni-icons>
					</view>
					<!-- 隔离 -->
					<view class="display " style="width: 100%;height: 72rpx;"></view>
					<view class="one display  all_item" v-for="(item,index) in 20" :key="index">
						<detailsVue></detailsVue>
					</view>

				</scroll-view>
			</view>
		</u-popup>
		<!-- 弹窗  立即兑换  居中 -->
			<u-popup :show="flag1" mode="center" :safeAreaInsetBottom="false" :round="40">
		            <view class="lijiduihuanpopup display  displayColumn displaycenter_aliem">
		                <view class="popupOne display  all_item" style="margin-top: 40rpx;">
		                	<span class="fontSize font_comm duihuan_wode_txt">立即兑换</span>
		                </view>
						<view class="popupCard display " style="margin-top: 24rpx;">
							<view class="left display  all_item">
								<img class="imgsmall" src="@/static/img/car-manage.png" alt="" />
							</view>
							<view class="right display  displayColumn">
								<span class="fontSize font_comm moka_txt1">摩卡兄弟.挪车码</span>
								<span class="fontSize font_comm moka_txt2">数量：1</span>
							</view>
						</view>
						<!-- 提示 -->
						<view class="popup_tishi display  displaycenter_aliem" style="margin-top: 24rpx;">
							<span class="fontSize font_comm M_40">对158****6666的手机号发送验证码</span>
						</view>
						<!-- 输入验证码 -->
						<view class="input_code display  " style="margin-top: 16rpx;">
							<view class="left_code display  M_40 displaycenter_aliem">
								<u-code-input
								 v-model="value5"
								  mode="box"
								   :space="5"
									size="22"
									 :maxlength="6"
									  hairline
									   borderColor="rgba(0,0,0,0.6)"
									   :focus="true"
									   @finish="finish"
									   ></u-code-input>
							</view>
							<!-- 获取验证码按钮 -->
							<view class="right_code displaycenter_aliem display " style="margin-left: 20rpx;">
								<!--  -->
								<button class="fontSize font_comm code_txt all_item">获取验证码</button>
							</view>
							
						</view>
						<!-- 按钮 -->
						<view class="two_button display " style="margin-top: 60rpx;">
							<button class="display fontSize font_comm all_item cancle_txt" @click="cancles">取消</button>
							<button class="display fontSize font_comm all_item confirm_txt">确认兑换</button>
						</view>
		            </view>
				</u-popup>
		
		
		<!-- 底部菜单 -->
		<view class="bottom_menu">
			<view class="kefu_anniu display ">
				<view class="kefu_anniu_all display L-R-ALL ">
					<view class="kefy_left display displaycenter_aliem">
						<img src="../../static/img2/kefu.png" alt="" style="width: 35rpx;height: 32rpx;" />
						<span class="font_comm fontSize lianxi_txt">联系客服</span>
					</view>
					<view class="anniu_right display displayColumn all_item" @click="duihuan">
						<span class="font_comm fontSize">立即兑换</span>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// 引入组件
	import detailsVue from './details.vue';
	export default {
		components: {
			detailsVue
		},
		data() {
			return {
				arr: [{
					name: '邮寄领取'
				}, {
					name: '到店领取'
				}],
				value5:'',//验证码
				selectIndex: 0, //选项 默认为邮寄领取
				flag: false, //控制弹窗
				flag1:false,//立即兑换弹窗
			}
		},
		methods: {
			rightClick() {

			},
			// 切换
			change(index) {
				this.selectIndex = index;
			},
			// 立即兑换
			duihuan() {
				this.flag1 = true;
			},
			scrolltolower(e) {
				//滚动到底部
				console.log(e, '滚动到底部')
			},
			// 打开弹窗
			openPopup() {
				this.flag = true;
			},
			// 关闭弹窗
			clises() {
				this.flag = false;
			},
			cancles(){
				this.flag1 = false;
			},
			// 验证码输入完成
			finish(e){
				// 
				console.log('验证码输入完成')
			},
			back(){
				this.$tab.navigateBack();
			}
		}
	}
</script>

<style>
	page {
		background: #F4F5FA;
	}
</style>
<style scoped lang="scss">
	.M_40{
		margin-left: 40rpx;
	}
	.content {
		width: 100%;
		min-height: 100vh;

	}

	.left_arrow {
		width: 44rpx;
		height: 44rpx;
		background: rgba(33, 33, 33, 0.2);
		border-radius: 50%;
		align-items: center;

	}

	.P-TB-24 {
		padding-top: 24rpx;
		padding-bottom: 24rpx;
	}

	.mokashoping {
		width: 128rpx;
		height: 44rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #212121;
		line-height: 38rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.content_all {
		width: 100%;
		min-height: 300rpx;
	}

	.fn_imgs {
		width: 100%;

		.imgs {
			width: 100%;
			height: 750rpx;
		}
	}

	.fn_sancode {
		width: 100%;
		height: 208rpx;

		.fn_sancodeall {
			width: 690rpx;
			height: 208rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.fn_item_all {
				justify-content: space-between;
				width: 100%;

				.one {
					align-items: flex-start;
					flex: 1;

					.moka_txt {
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 33rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}

				.two {
					flex: 1;
					height: 100%;

					.fuhao_txt {

						color: #FF5449;
						font-size: 24rpx;
						font-weight: 900;
					}

					.money_txt {
						color: #FF5449;
						font-size: 36rpx;
						font-weight: 900;
					}

					.dele_txt {
						color: #666666;
						font-size: 24rpx;
						text-decoration: line-through;
						margin-left: 18rpx;

					}
				}

				.three {
					flex: 1;
					align-items: flex-end;
					height: 100%;
					justify-content: space-between;

					.yunfei_txt {

						color: #72778A;
						font-size: 24rpx;
					}
				}

			}
		}
	}

	// 到店领取
	.button_two {
		width: 100%;
		height: 84rpx;

		.button_wto_left {
			justify-content: space-between;
			width: 100%;
			height: 84rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;

			.left_one {
				width: 330rpx;
				height: 84rpx;
				background: rgba(114, 119, 138, 0.1);
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.lingqu_txt {
					font-size: 28rpx;
					color: #72778A;
					line-height: 33rpx;

				}
			}

			.left_one1 {
				width: 330rpx;
				height: 84rpx;
				background: rgba(18, 107, 201, 0.1);
				border: 2rpx solid;
				border-image: linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;
				border-radius: 12rpx;

				.lingqu_txt {
					font-weight: 600;
					font-size: 28rpx;
					color: #126BC9;
				}
			}
		}
	}

	.selectmendian {
		width: 100%;
		height: 82rpx;

		.selectmendian_all {
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			width: 100%;
			height: 82rpx;
			justify-content: space-between;

			.select_txt {
				font-weight: 400;
				font-size: 24rpx;
				color: #212121;
				line-height: 28rpx;

			}

			.huixian_txt {
				font-size: 24rpx;
				color: #72778A;
			}
		}
	}

	// 底部菜单
	.bottom_menu {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 166rpx;
		background: rgba(255, 255, 255, 0.8);
		box-shadow: 0rpx -6rpx 47rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.kefu_anniu {
			width: 100%;
			height: 66rpx;
			margin-top: 16rpx;

			.anniu_right {
				width: 244rpx;
				height: 66rpx;
				background: #126BC9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				span {
					font-weight: 600;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.kefu_anniu_all {
				width: 100%;
				height: 100%;
				justify-content: space-between;

				.lianxi_txt {
					font-size: 24rpx;
					color: #212121;
					line-height: 28rpx;
					margin-left: 2rpx;
				}
			}
		}
	}

	.popup_all {
		width: 100%;
		height: 800rpx;


		.title_delete {
			position: absolute;
			width: 100%;
			height: 32rpx;

			top: 40rpx;
			justify-content: center;

			.lingqu_txt {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				justify-self: center;
			}

			.delete_icon {
				position: absolute;
				// justify-self: flex-end;
				right: 40rpx;

			}
		}

		.one {
			width: 100%;
			height: 120rpx;
		}
	}
	// 立即兑换弹窗
	.lijiduihuanpopup{
		width: 630rpx;
		height: 614rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		.two_button{
			width: 100%;
			height: 72rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			.cancle_txt{
				width: 220rpx;
				height: 72rpx;
				background: rgba(18,107,201,0.1);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #126BC9;
			}
			.confirm_txt{
				width: 290rpx;
				height: 72rpx;
				background: #126BC9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.popup_tishi{
			width: 100%;
			height: 40rpx;
			span{
				font-weight: 400;
				font-size: 28rpx;
				color: #212121;
			}
		}
		.input_code{
			width: 100%;
			height: 72rpx;
			.code_txt{
				display: flex;
				
				width: 216rpx;
				height: 72rpx;
				background: #126BC9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
		.popupOne{
			width: 100%;
			height: 32rpx;
			.duihuan_wode_txt{
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
			}
		}
		.popupCard{
			width: 550rpx;
			height: 194rpx;
			background: #F1F2F4;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			
			.left{
				flex: 3;
				.imgsmall{
					width: 146rpx;
					height: 146rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
			}
			.right{
				
				align-self: flex-start;
				flex: 7;
				margin-top: 10rpx;
				span{
					text-align: left;
					
				}
				:nth-child(1){
					margin-top: 24rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}
				:nth-child(2){
					margin-top: 66rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}
				// align-items: 
				
			}
		}
	}
</style>